<template>
  <div>
    <!-- select选择器  查询功能 -->
    <el-form ref="form" :model="form" label-width="100px" style="display: flex;" class="demo-ruleForm">
      <el-form-item label="产品类型" prop="type1">
        <el-select v-model="form.type1" clearable placeholder="请选择产品类型" @change="queryByName">
          <el-option v-for="item in type1" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型分类" prop="type2">
        <el-select v-model="form.type2" clearable placeholder="请选择类型分类">
          <el-option v-for="item in type2" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型分类" prop="name">
        <el-input v-model="form.name" clearable placeholder="请输入品名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="select">查询</el-button>
      </el-form-item>
    </el-form>

    <template>
      <el-table style="width: 100%" :data="chanpin">
        <el-table-column prop="img" label="图片" width="150px" align="center">
          <template slot-scope="scope">
            <img style="object-fit:cover" :src="scope.row.img" width="80px">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="品名" width="100px" align="center">
        </el-table-column>
        <el-table-column prop="type1" label="产品类型" align="center">
        </el-table-column>
        <el-table-column prop="type2" label="类型分类" align="center" width="120px">
        </el-table-column>
        <el-table-column prop="jiage" label="价格" align="center" width="180px">
          <template slot-scope="scope">{{ scope.row.jiage }}元</template>

        </el-table-column>
        <el-table-column prop="guige" label="规格" align="center" width="200px">
          <template slot-scope="scope">{{ scope.row.guige }}</template>
        </el-table-column>
        <el-table-column prop="kougan" align="center" label="口感">
        </el-table-column>

        <el-table-column label="操作" align="center" width="200px">
          <template slot-scope="scope">
            <el-button size="small" type="success" icon="el-icon-view"
              @click="$router.push('/home/commodity-select/' + scope.row.id)" circle></el-button>

            <el-button size="small" type="warning" @click="$router.push('/home/commodity-update/' + scope.row.id)"
              icon="el-icon-edit" circle></el-button>
            <el-button size="small" type="danger" @click="deleteById(scope.row)" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

  </div>
</template>

<script>
import httpApi from '@/myaxios/index';
export default {
  data() {
    return {
      chanpin: [],
      type1: [],
      type2: [],
      form: {
        type1: "",
        type2: "",
        name: ""
      },

    }
  },
  methods: {
    //通过类型查询或者名称模糊查询
    select() {
      // console.log(this.form);
      if (this.form.type2 == "" && this.form.type1 == "" && this.form.name == "") {
        httpApi.commodity.queryCPAll().then(res => {
          this.chanpin = res.data
          console.log(res.data);
        })
      } else if (this.form.type1 != "" && (this.form.type2 == "" && this.form.name == "")) {
        this.chanpin = []
        httpApi.commodity.selectLike({ type1: this.form.type1 }).then(res => {
          // console.log(res);
          this.chanpin = res.data
        })
      } else if ((this.form.type2 != "" && this.form.type1 != "") && this.form.name == "") {
        this.chanpin = []
        httpApi.commodity.selectLike({ type1: this.form.type1, type2: this.form.type2 }).then(res => {
          console.log(res);
          this.chanpin = res.data
        })
      } else if (this.form.type2 != "" && this.form.type1 != "" && this.form.name != "") {
        this.chanpin = []
        httpApi.commodity.selectLike(this.form).then(res => {
          console.log(res);
          this.chanpin = res.data
        })
      }else if(this.form.name != "" && (this.form.type2 == "" && this.form.type1 == "")){
        this.chanpin = []
        httpApi.commodity.selectLike({name:this.form.name}).then(res => {
          console.log(res);
          this.chanpin = res.data
        })
      }
      //else {
      //   if (this.form.type2 == "" ) {
      //     this.chanpin = []
      //     httpApi.commodity.selectLike({ type1: this.form.type1 }).then(res => {
      //       // console.log(res);
      //       this.chanpin = res.data
      //     })
      //   }
      //   else {
      //     this.chanpin = []
      //     httpApi.commodity.selectLike(this.form).then(res => {
      //       // console.log(res);
      //       this.chanpin = res.data
      //     })
      //   }
      // }
    },
    //通过id删除产品
    deleteById(params) {
      this.$confirm(`此操作将永久删除品名:${params.name}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(params.id);
        const id = parseInt(params.id)
        httpApi.commodity.deleteById(id).then(res => {
          this.init()
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //查询所有产品
    init() {
      httpApi.commodity.queryCPAll().then(res => {
        this.chanpin = res.data
        // console.log(res.data);
      })
    },
    //查询type2数据
    queryByName(params) {
      console.log(params);
      this.type2 = []
      httpApi.commodity.queryByTypeName({ name: params }).then(res => {
        for (let i = 0; i <= res.data[0].type.length; i++) {
          this.type2.push(res.data[0].type[i].name)
        }
      })
    },
  },
  mounted() {
    this.init();
    //查询type1数据
    httpApi.commodity.queryAll().then(res => {
      console.log("查询所有产品类型", res.data);
      for (let i = 0; i <= res.data.length; i++) {
        this.type1.push(res.data[i].name)
      }
    })
  },
}
</script>

<style lang="scss" scoped>
.type1 {
  margin-right: 50px;
}
</style>